<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script src="./libs/babel.min.js"></script>
    <script type="text/babel">
      const { useState, useEffect } = React;
      function CheckAll() {
        const [list, setList] = useState([
          {
            id: 1,
            name: "追风筝的人",
            checked: false,
          },
          {
            id: 2,
            name: "白夜行",
            checked: false,
          },
          {
            id: 3,
            name: "明朝那些事儿",
            checked: false,
          },
          {
            id: 4,
            name: "恶意",
            checked: false,
          },
          {
            id: 5,
            name: "秘密",
            checked: false,
          },
          {
            id: 6,
            name: "白鹿原",
            checked: false,
          },
        ]);
        const [checkAll, setCheckAll] = useState(false);
        const [checkEnd, setCheckEnd] = useState(false);
        useEffect(() => {
          if (checkEnd) {
            setList(
              list.map((item) => {
                item.checked = checkAll;
                return item;
              })
            );
            setCheckEnd(false);
          }
        }, [checkAll]);
        useEffect(() => {
          setCheckAll(
            list.filter((item) => item.checked).length === list.length
          );
        }, [list]);
        return (
          <div>
            <p>
              <label
                onClick={() => {
                  setCheckAll(!checkAll);
                  setCheckEnd(true);
                }}
              >
                <input onChange={() => {}} type="checkbox" checked={checkAll} />
                全选
              </label>
            </p>
            <ul>
              {list.map((item) => (
                <li key={item.id}>
                  <label
                    onClick={() => {
                      list.find((i) => i.id == item.id).checked = !list.find(
                        (i) => i.id == item.id
                      ).checked;
                      setList([...list]);
                    }}
                  >
                    <input
                      onChange={() => {}}
                      type="checkbox"
                      checked={item.checked}
                    />
                    {item.name}
                  </label>
                </li>
              ))}
            </ul>
          </div>
        );
      }
      function App() {
        return <CheckAll />;
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>
